
<template>
  <div class="dialogBox">
    <el-input :style="{ width: width }" :size="size" v-if="isShow" v-model="selectionLabel" :placeholder="placeholder" suffix-icon="el-icon-search" :disabled="openDisabled" :readonly="true" @focus="dialogTableVisible = true">
    </el-input>
    <el-dialog title="数据列表" append-to-body :visible.sync="dialogTableVisible" custom-class="dLog" fullscreen width="700px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="search != ''" label-width="90">
        <el-form-item :label="items.label" :prop="items.prop" v-for="(items, indexs) in searchCriteria" :key="indexs + items.label" v-show="!items.options">
          <el-input v-model="queryParams[items.prop]" :placeholder="'请输入' + items.label" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="items.label" :prop="items.prop" v-for="(items, indexs) in searchCriteria" :key="indexs + items.label + 1" v-show="items.options">
          <el-select v-model="queryParams[items.prop]" :placeholder="items.label" clearable size="small">
            <el-option v-for="(item, index) in items.options" :key="index + item.dictLabel + 1" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          > -->
        </el-form-item>
      </el-form>
      <LbTableLog v-if="multiple == false || multiple == 'false'" v-loading="loading" ref="lbTable" highlight-current-row pagination cell-class-name="li_table" max-height="400" background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20]" :current-page.sync="queryParams.pageNum" :total="queryParams.total" :page-size="queryParams.pageSize" @size-change="handleSizeChange" :tableData="tableData" @p-current-change="handleCurrentChange($event)" @current-change="selectionChange">
      </LbTableLog>
      <LbTableLog v-if="multiple == true || multiple == 'true'" v-loading="loading" ref="multipleTable" highlight-current-row pagination max-height="400" background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[20]" :current-page.sync="queryParams.pageNum" :total="queryParams.total" :page-size="queryParams.pageSize" @size-change="handleSizeChange" :tableData="tableData" @p-current-change="handleCurrentChange($event)" @selection-change="selectionChange($event)" @select="select" @select-all="selectAll">
      </LbTableLog>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" :disabled="disabled">确 定</el-button>
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </span>
    </el-dialog>
        <!-- 添加或修改进出库记录对话框 -->
    <el-dialog
      v-myFullscreen
      title="详情查看"
      :visible.sync="open"
      width="950px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        label-width="90px"
        style="border: solid 1px rgb(21 144 206 / 20%)"
      >
        <el-divider content-position="center">申请信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-input
                v-model="form.code"
                placeholder="请输入编号"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入记录名称"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进出库类型">
              <el-radio-group v-model="form.inOut" :disabled="true">
                <el-radio
                  v-for="dict in inOutOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                  >{{ dict.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择操作类型"
                :disabled="true"
              >
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录人" prop="applyName">
              <el-input
                v-model="form.applyName"
                placeholder="请输入编号"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录时间" prop="applyTime">
              <el-date-picker
                :editable="false"
                clearable
                size="small"
                v-model="form.applyTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择记录时间"
                :disabled="true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="所属仓库" prop="depotId">
                <el-select
                  v-model="form.depotId"
                  placeholder="请选择仓库"
                  :disabled="true"
                >
                  <el-option
                    v-for="depot in depotOptions"
                    :key="depot.id"
                    :label="depot.name"
                    :value="depot.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请状态" prop="status">
                <el-select v-model="form.status" :disabled="true">
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总价（元）" prop="applyName">
              <el-input
                v-model="form.zonprice"
                placeholder="请输入编号"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center">进出库记录-物资列信息</el-divider>
        <el-table
          :data="eqpDepotInOutGoodsList"
          :row-class-name="rowEqpDepotInOutGoodsIndex"
          ref="eqpDepotInOutGoods"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column
            label="序号"
            width="50px"
            align="center"
            prop="index"
          />
          <el-table-column label="编号" prop="code">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.code"
                placeholder="请输入编号"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="物资名称" prop="goodsId">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.goodsName"
                placeholder="请输入物资名称"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="规格" prop="goodsId">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.model"
                placeholder=""
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="申请数量" prop="num">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.num"
                placeholder="请输入申请数量"
                :disabled="true"
              />
            </template>
          </el-table-column>

          <el-table-column label="单位" prop="unit">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.unit"
                placeholder="请输入单位"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="单价（元）" prop="num">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                placeholder="请输入单价"
                :disabled="true"
              />
            </template>
          </el-table-column>
          <el-table-column label="总价（元）" prop="num">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price * scope.row.num"
                placeholder="请输入单价"
                :disabled="true"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, listPost } from "@/api/dialog/index";
import {
  listInOutRecord,
  getInOutRecord,
  getRecord,
  delInOutRecord,
  addInOutRecord,
  updateInOutRecord,
} from "@/api/equipment/materials/stockInOutRecord";
import { listDepot, getDepot } from "@/api/equipment/materials/depot";
import LbTableLog from "@/components/table/lb-table/lb-table-log.vue";
export default {
  components: {
    LbTableLog,
  },
   data() {
    return {
      // 是否禁用
      disabled: false,
      // 是否加载
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 弹窗是否显示
      dialogTableVisible: false,
      // 表格数据
      tableData: {
        column: [],
        data: [],
      },
      // 搜索条件
      searchCriteria: [],
      // 查询参数
      queryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
      },
      //选择的数据
      selectList: null,
      //处理的数据
      arr: [],
      //选择后处理的对象
      selection: {
        value: null,
        label: null,
        options: null,
      },
      selectionLabel: "",
      // 进出库记录表格数据
      inOutRecordList: [],
      // 进出库记录-物资列表格数据
      eqpDepotInOutGoodsList: [],
      open: false,
      // 表单参数
      form: {},
      // 是否显示弹出层
      open: false,
      // 进出库类型字典
      inOutOptions: [],
      // 操作类型字典
      typeOptions: [],
      outTypeOptions: [],
      inTypeOptions: [],
      // 是否有效字典
      statusOptions: [],
      // 所属仓库
      depotOptions: [],
      // 是否有效字典
      inStatusOptions: [
        { dictLabel: "进行中", dictValue: "01" },
        { dictLabel: "已完成", dictValue: "99" },
      ],
    };
  },
  props: {
    url: String,
    value: String,
    label: String,
    echoValue: String | Number,
    column: Array | Object,
    search: {
      //搜索的参数
      type: String,
      default: "",
    },
    multiple: {
      //是否可多选
      type: Boolean | String,
      default: false,
    },
    openDisabled: {
      //是否禁用
      type: Boolean | String,
      default: false,
    },
    isShow: {
      //输入框是否显示
      type: Boolean | String,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    parameter: {
      type: String,
      default: "rows",
    },
    method: {
      //请求类型
      type: String,
      default: "get",
    },
    contentType: {
      //请求类型
      type: String,
      default: "json",
    },
    axiosData: {
      //请求参数
      type: Object | Array,
      default: () => {},
    },
    width: {
      type: String,
      default: "100%",
    },
    size: {
      type: String,
      default: "small",
    },
  },
  watch: {
    echoValue: function (newVal, oldVal) {
      // console.log(1, newVal, oldVal);
      this.selectionLabel = this.echoValue;
    },
    dialogTableVisible: function (newVal, oldVal) {
      if (this.dialogTableVisible == true) {
        this.queryParams.pageNum = 1;
        if (this.multiple == true || this.multiple == "true") {
          this.tableData.column = [
            {
              type: "selection",
            },
          ];
        } else {
          this.tableData.column = [];
        }
        this.arr = [];
        this.loading = true;
         for (let items of this.column) {
          let split = items.split("/");
          let object = {};
          object.label = split[0];
          if (split[1] == "查看") {
            object.render = (h, scope) => {
              return (
                <div>
                  <el-button
                    size="mini"
                    onClick={() => {
                      this.handleLook(scope.$index, scope.row);
                    }}
                  >
                    {split[1]}
                  </el-button>
                </div>
              );
            };
          } else {
            object.prop = split[1];
          }

          if (split.length <= 2) {
            this.arr.push(object);
          }
          if (split.length > 2) {
            this.getDicts(split[2]).then((response) => {
              object.options = response.data;
              this.arr.push(object);
            });
          }
        }
        window.clearTimeout(timer);
        var timer = window.setTimeout(() => {
          this.searchCriteria = [];
          this.tableData.column.push(...this.arr);
          let searchArr = this.search.split("/");
          for (let items of searchArr) {
            for (let item of this.arr) {
              if (item.prop == items) {
                this.searchCriteria.push(item);
              }
            }
          }
          for (let item of this.tableData.column) {
            item.align = "center";
          }
          this.getList();
          if (this.multiple == true || this.multiple == "true") {
            this.selectList = [];
          } else {
            this.selectList = {};
          }
          this.disabled = true;
        }, 1000);
         this.getDicts("in_out_stock").then((response) => {
          this.inOutOptions = response.data;
        });
        this.getDicts("out_stock_type").then((response) => {
          this.outTypeOptions = response.data;
        });
        this.getDicts("in_stock_type").then((response) => {
          this.inTypeOptions = response.data;
        });
        this.getDicts("out_stock_status").then((response) => {
          this.outStatusOptions = response.data;
        });
        this.getDicts("in_out_stock").then((response) => {
          this.inOutOptions = response.data;
        });
        let depotParams = {
          type: "01",
          parentId: null,
          id: null,
        };
        listDepot(depotParams).then((response) => {
          this.depotOptions = response.data;
        });
      }
    },
    // 是否禁用
    selectList(val) {
      try {
        if (this.multiple == true || this.multiple == "true") {
          if (this.selectList.length == 0) {
            this.disabled = true;
          } else {
            this.disabled = false;
          }
        } else {
          if (JSON.stringify(this.selectList) == "{}") {
            this.disabled = true;
          } else {
            this.disabled = false;
          }
        }
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },

  created() {
    this.selectionLabel = this.echoValue;
  },
  methods: {
     //查看
    handleLook(index, row) {
      // console.log(index, row);
      //  this.reset();
      const id = row.id || this.ids;
      getRecord(id).then((response) => {
        this.form = response.data;
        if (this.form.inOut == "in") {
          this.typeOptions = this.inTypeOptions;
        } else if (this.form.inOut == "out") {
          this.typeOptions = this.outTypeOptions;
        }
        this.getStatusOptions();
        this.eqpDepotInOutGoodsList = response.data.eqpDepotInOutGoodsList;
        var prizo = 0;
        for (let i = 0; i < this.eqpDepotInOutGoodsList.length; i++) {
          prizo =
            prizo +
            this.eqpDepotInOutGoodsList[i].price *
              this.eqpDepotInOutGoodsList[i].num;
        }
        this.form.zonprice = prizo;
        this.open = true;
      });
    },
    /** 进出库记录-物资列序号 */
    rowEqpDepotInOutGoodsIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    getStatusOptions() {
      if (this.form.inOut == "in") {
        this.statusOptions = this.inStatusOptions;
      } else if (this.form.inOut == "out") {
        this.statusOptions = this.outStatusOptions;
      }
    },
    //选择
    selectionChange(val) {
      if (val instanceof Array == true) {
        for (let item of val) {
          item.pageNum = this.queryParams.pageNum;
        }
        this.selectList.push(...val);
        this.selectList = this.deWeightThree(this.selectList);
      } else {
        if (val != null) {
          this.selectList = val;
        }
      }
    },
    select(selection, row) {
      let temp = 0;
      if (selection instanceof Array == true) {
        if (this.selectList.length > 0) {
          for (let index in this.selectList) {
            if (this.selectList[index][this.value] == row[this.value]) {
              this.selectList.splice(index, 1);
              temp++;
            }
          }
          if (temp == 0) {
            row.pageNum = this.queryParams.pageNum;
            this.selectList.push(row);
          }
        }
      }
      //  console.log(this.selectList)
    },
    selectAll(selection) {
      if (selection.length == 0) {
        this.selectList = this.selectList.filter(
          (item) => item.pageNum !== this.queryParams.pageNum
        );
      }
    },
    deWeightThree(arr) {
      let arr1 = []; //存id
      let newArr = []; //存新数组
      for (let i in arr) {
        if (arr1.indexOf(arr[i][this.value]) == -1) {
          arr1.push(arr[i][this.value]);
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      let queryParams = Object.assign(this.queryParams, this.axiosData);
      // if (this.method == "get") {
      list(this.url, queryParams, this.method, this.contentType).then(
        (response) => {
          this.tableData.data = response[this.parameter];
          this.queryParams.total = response.total;
          this.loading = false;
          if (this.multiple == true || this.multiple == "true") {
            let hasIdArr = [];
            let list = [];
            this.selectList.forEach((item) => hasIdArr.push(item[this.value]));
            this.tableData.data.forEach((item) => {
              hasIdArr.includes(item[this.value]) && list.push(item);
            });
            clearTimeout(settimeout);
            var settimeout = setTimeout(() => {
              list.forEach((item) => {
                this.$refs.multipleTable.toggleRowSelection(item);
              });
            }, 100);
          } else {
            this.selectList = {};
          }
        }
      );
      // } else {
      //   listPost(this.url, queryParams).then((response) => {
      //     this.tableData.data = response[this.parameter];
      //     this.queryParams.total = response.total;
      //     this.loading = false;
      //     if (this.multiple == true || this.multiple == "true") {
      //       let hasIdArr = [];
      //       let list = [];
      //       this.selectList.forEach((item) => hasIdArr.push(item[this.value]));
      //       this.tableData.data.forEach((item) => {
      //         hasIdArr.includes(item[this.value]) && list.push(item);
      //       });
      //       clearTimeout(settimeout);
      //       var settimeout = setTimeout(() => {
      //         list.forEach((item) => {
      //           this.$refs.multipleTable.toggleRowSelection(item);
      //         });
      //       }, 100);
      //     }
      //   });
      // }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    setCurrent(row) {
      this.$refs.lbTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getList();
    },
    submit(e) {
      let value = this.value;
      let label = this.label;

      if (this.multiple == true || this.multiple == "true") {
        this.selection.options = new Array();
        this.selection.value = new Array();
        this.selection.label = new Array();
        for (let j of this.selectList) {
          let obj = new Object();
          obj.value = j[value];
          obj.label = j[label];
          this.selection.options.push(j);
          this.selection.value.push(j[value]);
          this.selection.label.push(j[label]);
        }
        let selection = JSON.parse(JSON.stringify(this.selection));
        selection.label = selection.label.toString();
        selection.value = selection.value.toString();
        this.selectionLabel = selection.label;
        this.$emit("dialogChange", selection);
        this.dialogTableVisible = false;
      }
      if (this.multiple == false || this.multiple == "false") {
        this.selection.options = new Object();
        this.selection.value = new Object();
        this.selection.label = new Object();
        this.selection.options = this.selectList;
        this.selection.value = this.selectList[value];
        this.selection.label = this.selectList[label];
        this.selectionLabel = this.selection.label;
        // console.log(this.selectionLabel);
        this.$emit("dialogChange", this.selection);
        this.dialogTableVisible = false;
      }
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .item {
    width: 31%;
    height: 48%;
    float: left;
    margin: 0 0 1% 1.7%;
    background: rgba(9, 59, 118, 0.9);
    box-shadow: 0 0 7px #ccffff;
  }
}
</style>
<style lang="scss">
.dialogBox {
  .el-table {
    max-height: 50vh !important;
    padding: 0px;
    margin-top: 13px;
    background: rgb(15 47 86 / 70%) !important;
    overflow: auto;
  }
  .el-table__body tr.current-row > td {
    background: rgb(15 47 86 / 70%) !important;
    // background-color: #19204e !important;
  }
  .el-form {
    padding: 10px 12px;
    background: rgb(15 47 86 / 70%) !important;
  }
  .el-form-item {
    margin-bottom: 3px !important;
  }
  .el-radio__inner,
  .el-checkbox__inner {
    border: 1px solid #1890ff;
  }
  .el-radio__input.is-checked,
  .el-checkbox__input.is-checked {
    .el-radio__inner,
    .el-checkbox__inner {
      background: #1890ff;
    }
  }
}
</style>
